<template>
  <div>
    <ShareCard :loading="isLoading" :cardData="cardData" :showTitle="showTitle">
      <Tabs v-model:activeKey="activeKey" type="card" centered>
        <TabPane :key="index" v-for="(item, index) in handle_list">
          <template #tab>
            <div @mouseenter="onMousemove(item, index)" @click="onTabClick(item)">{{
              item.tabName
            }}</div>
          </template>
        </TabPane>
      </Tabs>
      <div>
        <div
          v-for="(item, index) in dataSource"
          :key="index"
          class="flex pt-2 pb-2"
          style="border-bottom: 1px solid #f0f0f0; width: 100%"
        >
          <div class="flex items-center justify-center" style="width: 20%">
            <div class="flex items-center justify-center w-50px h-80px">
              <Image :src="currentTabRecord.icon" alt="" v-if="currentTabRecord.icon" />
            </div>
          </div>
          <div style="width: 60%">
            <div
              class="text-lg font-semibold cursor-pointer mb-10px"
              @click="handleTileClcik(item)"
            >
              {{ item['f.title'] }}
            </div>
            <div class="flex items-center">
              <Timeline>
                <TimelineItem color="#f0f0f0"
                  >紧急程度：
                  <span title="普通" v-if="item['f.flow_level'] == 0"
                    ><Icon icon="clarity:control-lun-line" />
                    普通
                  </span>
                  <span title="一般" v-if="item['f.flow_level'] == 1" style="color: orange"
                    ><Icon icon="clarity:control-lun-outline-badged" />
                    一般
                  </span>
                  <span title="紧急" v-if="item['f.flow_level'] == 2" style="color: red"
                    ><Icon icon="clarity:control-lun-outline-badged" />
                    紧急
                  </span>
                </TimelineItem>
                <TimelineItem color="#f0f0f0">公文类型：{{ item['f.type_code'] }}</TimelineItem>
                <TimelineItem color="#f0f0f0">拟稿日期：{{ item['f.begin_date'] }}</TimelineItem>
              </Timeline>
            </div>
          </div>
          <div class="flex items-center justify-center" style="width: 20%">
            <Tag :color="getColor(item['currentActionColorIndex'])">{{
              item['f.currentAction']
            }}</Tag>
          </div>
        </div>
        <div class="pt-2 pb-2 text-right" v-if="dataSource?.length && pagination">
          <Pagination
            size="small"
            v-model:current="current"
            v-model:pageSize="pageSize"
            show-quick-jumper
            :total="total"
            show-less-items
            :showTotal="(total) => t('component.table.total', { total })"
            @change="onChange"
          />
        </div>
      </div>
      <ProcessDrawer @register="registerDrawer" @success="handleSuccess" />
    </ShareCard>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, onMounted } from 'vue';
  import { useGo } from '/@/hooks/web/usePage';
  import ShareCard from './ShareCard.vue';
  import { Tabs, TabPane, Tag, Pagination, Timeline, Image } from 'ant-design-vue';
  import { getFlowList } from '/@/api/process/process';
  import { isArray } from '/@/utils/is';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useDebounceFn } from '@vueuse/core';
  import ProcessDrawer from '/@/views/pages/processManagement/processDrawer.vue';
  import { useDrawer } from '/@/components/Drawer';
  import { Icon } from '/@/components/Icon';
  import { colorList } from '/@/views/system/workflow/flowManagement/modules/flowPicture/modules/modules/nodeEdit/nodeEdit.data';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const TimelineItem = Timeline.Item;
  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    icon: {
      type: String as PropType<string>,
      default: '',
    },
    pageSize: {
      type: Number,
      default: 6,
    },
    pagination: {
      type: Boolean,
      default: true,
    },
    cardData: {
      type: Object as PropType<object>,
      default: () => {
        return {};
      },
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
  });
  const { createMessage } = useMessage();
  const activeKey = ref(0);
  const isLoading = ref(false);
  const handle_list = ref<Recordable[]>([]);
  const currentTabRecord = ref<Recordable>({});
  const cardDataObj = ref<Recordable>({});
  const current = ref(1);
  const dataSource = ref<Recordable[]>([]);
  const total = ref(0);
  let flowOpStyle = 0;
  const pageSize = ref(props.pageSize);
  const fetch = async () => {
    console.log('cardData', props.cardData);
    cardDataObj.value = props.cardData;
    if (cardDataObj.value?.meta?.handle_list && isArray(cardDataObj.value?.meta?.handle_list)) {
      //过滤可用的
      handle_list.value = cardDataObj.value.meta.handle_list.filter((item) => item.isUse);
      if (handle_list.value.length) {
        currentTabRecord.value = handle_list.value[0];
        // getListPage();
        searchData();
      }
    }
    //   if (!props.formCode) return;
  };

  const [registerDrawer, { openDrawer }] = useDrawer();
  const searchData = () => {
    serach(1);
  };
  //页面回调
  function handleSuccess() {
    searchData();
  }
  const go = useGo();
  //标题点击
  const handleTileClcik = (record) => {
    handleEdit(record);
  };

  function handleEdit(record: any) {
    if (flowOpStyle == 1) {
      let title = record['f.id'] + '-' + record['f.title'];
      if (title.length > 18) {
        title = title.substring(0, 18) + '...';
      }
      if (record.type == 2) {
        go({
          path: '/processHandle',
          query: {
            myActionId: record.id,
            isFromProcess: true,
            title: title,
            cacheName: `processHandle${record['f.id']}`,
          },
        });
      } else {
        go({
          path: '/processHandleFree',
          query: {
            myActionId: record.id,
            isFromProcess: true,
            title: title,
            cacheName: `processHandle${record['f.id']}`,
          },
        });
      }
    } else {
      openDrawer(true, {
        myActionId: record.id,
        type: record.type,
      });
    }
  }

  const serach = (page?) => {
    isLoading.value = true;
    if (page) {
      current.value = page;
    }
    getFlowList({
      page: unref(current),
      pageSize: unref(pageSize),
      type: unref(currentTabRecord).type,
      typeCode: unref(currentTabRecord).code,
    })
      .then((res) => {
        dataSource.value = res.list || [];
        total.value = res.total;
        flowOpStyle = res.flowOpStyle;
      })
      .finally(() => {
        isLoading.value = false;
      });
  };

  //分页回调
  const onChange = () => {
    serach();
  };

  // 防抖，延迟500ms执行
  const debounceFresh = useDebounceFn(searchData, 500);
  //鼠标移动事件
  const onMousemove = (item: any, index) => {
    //如果值一样不执行
    if (activeKey.value === index) return;
    currentTabRecord.value = item;
    activeKey.value = index;
    debounceFresh();
  };

  //点击tab去哪
  const onTabClick = ({ type, code, tabName }) => {
    switch (type) {
      case 'doing':
        go({
          path: '/flow/doing',
          query: {
            typeCode: code,
            tabName,
          },
        });
        break;
      case 'read':
        // go({
        //   path: '/flow/read',
        //   query: {
        //     typeCode: code,
        // tabName,
        //   },
        // });
        break;
      case 'attend':
        go({
          path: '/flow/attend',
          query: {
            typeCode: code,
            tabName,
          },
        });
        break;
      case 'urge':
        // go({
        //   path: '/flow/urge',
        //   query: {
        //     typeCode: code,
        // tabName,
        //   },
        // });
        break;
      default:
        break;
    }
  };

  onMounted(fetch);

  const getColor = (currentActionColorIndex) => {
    const curColorRecord = colorList.find((item) => item.id == currentActionColorIndex);
    if (curColorRecord) {
      return curColorRecord.color;
    }
    return '';
  };
</script>
<style lang="less" scoped>
  :deep(.m-2) {
    margin: 0 !important;
  }
  :deep(.ant-card-head) {
    min-height: 0;
    height: 0;
  }
  :deep(.ant-timeline-item) {
    padding: 2px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(0, 0, 0, 0.5);
  }
  :deep(.ant-timeline-item-last) {
    padding: 2px 0 0;
  }
  :deep(.ant-timeline-item-last > .ant-timeline-item-content) {
    min-height: unset;
  }

  :deep(.ant-tabs-top > .ant-tabs-nav, .ant-tabs-bottom > .ant-tabs-nav, .ant-tabs-top
      > div
      > .ant-tabs-nav, .ant-tabs-bottom > div > .ant-tabs-nav) {
    margin: 0;
  }
</style>
